<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>localstorage</title>
    </head>
    <body>
        <form >
            <fieldset>
                <legend>输入数据</legend>
                <label for="sitename">网站名称(key)</label>
                <input type="text" id="sitename" name="sitename">
                <br/>
                <label for="siteurl">网站地址(value)</label>
                <input type="text" id="siteurl" name="siteurl">
                <br/>
                <input type="button" value="提交" onclick="save()">

            </fieldset>
        </form>
        <br/>
        
    <div id="display">
    </div>
   
    <script>
        print();
        function save()
         {
            var sitename = document.getElementById("sitename").value;   //这里的value是干嘛的?为什么不用innerText
            var siteurl = document.getElementById("siteurl").value;
            localStorage.setItem(sitename,siteurl);
            alert("提交成功");
        }
        function print()
        {  
            var display=document.getElementById("display");
            var long=localStorage.length;
            if (long > 0) 
            {
                var table = "<table border='1'>";
                table += "<tr><td> key </td><td> value </td></tr> "
                for(var i=0;i<long;i++ )
                {
                    var sitename=localStorage.key(i);
                    var siteurl=localStorage.getItem(sitename);
                    table +="<tr><td>"+sitename+"</td><td>"+siteurl+"</td></tr>"
                }
                table += "</table>"
                display.innerHTML=table;
            }
            else
            {
                display.innerHTML= "没有数据";
            }
        }      
    </script>
    

    </body>
    
</html>